<template>
	<div class="home">
    <div class="box">
      <div class="banner">
        <el-carousel indicator-position="outside" style="height: 500px;">
          <el-carousel-item v-for="item in banner" :key="item" style="height: 500px;">
            <img :src="item" alt="" width="100%" height="100%">
          </el-carousel-item>
        </el-carousel>
        <div class="category">
          <div v-for="(item, index) in category" :key="index">
            <span>{{item.name}}</span>
            <img src="/vue/imgs/icon-arrow.png" alt="" width="10px" height="10px">
            <div class="list">
              <span v-for="(t, i) in item.treeList" :key="i">{{t.name}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="line">
        <h1>热门商品</h1>
        <h1 class="allProduct" @click="$router.push('/productList')">商品列表</h1>
        <ProductListComponents :list="hot"/>
      </div>
      <div class="line">
        <h1>手机数码</h1>
        <ProductListComponents :list="product"/>
      </div>
    </div>
	</div>
</template>

<script>
import ProductListComponents from "@/components/ProductListComponents";
export default{
  components : {
    ProductListComponents
  },
  data(){
    return {
      banner : [
          "/vue/images/banner1.jpg",
          "/vue/images/banner2.jpg"
      ],
      category : [],
      hot : [],
      product : [],
    }
  },
  created() {
    this.getCategory()
    this.getProductHot()
    this.getProduct()
  },
  methods : {
    getCategory() {
      this.axios
      .get("/api/category")
      .then((res) => {
        if (res.status == 200){
          this.category = res.data
        }
      })
    },
    getProductHot() {
      this.axios
      .post("/api/product/getHot", {
        size : 8,
        current : 1,
      })
      .then((res) => {
        if (res.status == 200){
          this.hot = res.data.records
        }
      })
    },
    getProduct() {
      this.axios
      .post("/api/product", {
        size : 8,
        current : 1,
      })
      .then((res) => {
        if (res.status == 200){
          this.product = res.data.records
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.home{
  min-height: 650px;
  .box{
    width: 1200px;
    margin: 0 auto;
    padding: 10px 0;
    .banner{
      position: relative;
    }
    .category{
      position: absolute;
      top: 0;
      left: 0;
      width: 250px;
      height: 100%;
      background: rgba(0,0,0,0.3);
      z-index: 99;
      color: #fff;
      font-size: 16px;
      &>div{
        width: 100%;
        box-sizing: border-box;
        padding: 0 30px;
        cursor: pointer;
        height: calc(100% / 6);
        line-height: 80px;
        img{
          margin-left: 100px;
        }
        &:hover{
          background: rgba(0,0,0,0.5);
        }
        &:hover .list{
          display: block;
        }
        .list{
          position: absolute;
          left: 250px;
          top: 0px;
          height: 500px;
          width: calc(1200px - 250px);
          background: rgba(0,0,0,0.5);
          display: none;
          text-align: center;
        }
      }
      span{
        cursor: pointer;
        padding: 20px;
      }
    }
    .line{
      margin-top: 50px;
      position: relative;
      .allProduct{
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
      }
    }
  }
}
</style>
